// ContactForm.tsx
import React, { useState } from 'react';
import styles from './Chat.module.scss';

interface ContactFormProps {
    onSubmit: (data: FormData) => void;
}

interface FormData {
    problemDesc: string;
    packageNumber: string;
    contactInfo: string;
    email: string;
    attachment?: FileList;
}
export const Chat: React.FC<ContactFormProps> = ({ onSubmit }) => {
    const [formData, setFormData] = useState<FormData>({
        problemDesc: '',
        packageNumber: '',
        contactInfo: '',
        email: ''
    });

    const [attachment, setAttachment] = useState<FileList | null>(null);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };
    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            setAttachment(e.target.files);
        }
    };
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onSubmit({
            ...formData,
            attachment: attachment || undefined
        });
    };

    return (
        <div>
            <header>
                <h3>给我们留言</h3>
            </header>

            <form className={styles.contactForm} onSubmit={handleSubmit}>
                <div className={styles.uploadGroup}>
                    <label className={styles.uploadLabel}>
                        附件上传
                        <input
                            type="file"
                            name="attachment"
                            onChange={handleFileChange}
                            style={{ display: 'none' }}
                        />
                    </label>
                    {attachment && (
                        <div className={styles.fileList}>
                            {Array.from(attachment).map((file, index) => (
                                <div key={index} className={styles.fileItem}>
                                    {file.name}
                                </div>
                            ))}
                        </div>
                    )}<span>单个附件最高50M,全部附件最高50M</span>
                </div>
                <fieldset className={styles.fieldset}>
                    <legend className={styles.legend}>在线客服时间：周一至周日为 9:30—18:30</legend>
                    <p className={styles.notice}>
                        您好，由于当前是非工作时间，如需帮助，请留言，我们将以邮件形式回复您的问题。
                    </p>

                    <div className={styles.formGroup}>
                        <label className={styles.label} htmlFor="problemDesc"><sup>*</sup>问题描述</label>
                        <textarea
                            className={styles.textarea}
                            id="problemDesc"
                            name="problemDesc"
                            value={formData.problemDesc}
                            onChange={handleChange}
                            required
                            placeholder="请输入留言"
                            rows={4}
                        ></textarea>
                    </div>

                    <div className={styles.formGroup}>
                        <label className={styles.label} htmlFor="packageNumber"><sup>*</sup>包图号</label>
                        <input
                            className={styles.input}
                            id="packageNumber"
                            name="packageNumber"
                            value={formData.packageNumber}
                            onChange={handleChange}
                            required
                            placeholder="请输入"
                        />
                    </div>

                    <div className={styles.formGroup}>
                        <label className={styles.label} htmlFor="contactInfo"><sup>*</sup>问题描述</label>
                        <textarea
                            className={styles.textarea}
                            id="contactInfo"
                            name="contactInfo"
                            value={formData.contactInfo}
                            onChange={handleChange}
                            required
                            placeholder="请输入留言"
                            rows={4}
                        ></textarea>
                    </div>

                    <div className={styles.formGroup}>
                        <label className={styles.label} htmlFor="email"><sup>*</sup>邮箱</label>
                        <input
                            className={styles.input}
                            id="email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            required
                            type="email"
                            placeholder="请输入"
                        />
                    </div>
                    <div className={styles.buttonGroup}>
                        <button
                            type="submit"
                            className={styles.submitButton}
                            disabled={
                                !formData.problemDesc ||
                                !formData.packageNumber ||
                                !formData.contactInfo ||
                                !formData.email
                            }
                        >
                            提交
                        </button>
                        <button
                            type="button"
                            className={styles.recordButton}
                        >
                            查看留言记录
                        </button>
                    </div>
                </fieldset>
            </form>
        </div>
    );
};